<template>
  <div class="order-price">
    <div class="order-price__title">
      <span>Order price</span>
      <ToolTip text="this is test" />
    </div>
    <div class="order-price__input">
      <input
        type="text"
        v-model="price"
        placeholder="Order Price"
        @input="changeInput"
        @change="changeInput"
      />
      <div class="g-clickable switch" @click="change(!inverse)">
        <span v-if="inverse">{{ this.from.symbol }}</span>
        <span v-else>{{ this.to.symbol }}</span>
        <i class="iconfont icon-switch2"></i>
      </div>
    </div>
  </div>
</template>

<script>
import ToolTip from "@/components/common/ToolTip";
import { mapState } from "vuex";

export default {
  components: {
    ToolTip,
  },
  props: {
    quotePrice: {
      type: [Number, String],
      default: 0,
    },
  },
  data() {
    return {
      price: this.quotePrice,
      edit: false,
      inverse: false,
    };
  },
  computed: {
    ...mapState({
      from: (state) => state.from,
      to: (state) => state.to,
    }),
  },
  watch: {
    "from.symbol"() {
      this.price = "";
      this.inverse = false;
      this.edit = false;
    },
    "to.symbol"() {
      this.price = "";
      this.inverse = false;
    },
    quotePrice(val) {
      if (!this.edit) {
        this.inverse = false;
        this.price = val;
        this.edit = false;
      }
    },
  },
  methods: {
    change(_inverse) {
      if (_inverse) {
        this.inverse = true;
      } else {
        this.inverse = false;
      }
      this.price = 1 / this.price;
      this.emitInput(this.price);
    },
    changeInput(e) {
      this.edit = true;
      this.emitInput(e.target.value);
    },
    emitInput(val) {
      if (this.inverse) {
        val = 1 / val;
      }
      this.$emit("input", val);
      this.$emit("change", val);
    },
  },
};
</script>

<style lang="scss" scoped>
.order-price {
  margin-left: 15px;
  &__title {
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-left: 8px;

    span {
      font-size: 14px;
      font-family: "Roboto Medium";
      color: var(--color-content);
    }
  }

  &__input {
    display: flex;
    align-items: center;
    width: 190px;
    height: 46px;
    padding: 0 12px;
    background-color: transparent;
    border: 3px solid var(--border-color);
    border-radius: 12px;
    box-sizing: border-box;
    input {
      width: 90px;
      background-color: transparent;
      border: none;
      outline: none;
      text-align: left;

      font-size: 14px;
      font-family: "Roboto Bold";
      color: var(--color);
    }

    .switch {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      span {
        font-size: 12px;
        font-family: "Roboto Regular";
        color: var(--color-content);
      }
      i {
        color: var(--color-content);
        font-size: 20px;
        margin-left: 3px;
      }
    }
  }
}
</style>
